<template>
<u-popup v-model="showPwdModal" mode="center" closeable border-radius="14" :mask-close-able="false" @close="closeModal">
      <view class="cur-modal-content">
        <view class="u-text-center box-title">
          <view class="cur-title">请输入支付密码</view>
          <view class="title u-font-32">提现</view>
          <view class="money text-color-txtTheme">¥ <text class="box-title u-margin-left-10">{{form.price}}</text></view>
        </view>
        
        <u-line></u-line>

        <view class="u-flex u-row-between u-margin-top-32 u-margin-bottom-12 u-font-28">
          <view class="text-tips">手续费</view>
          <view class="tip-text">¥{{form.serviceCharge}}</view>
        </view>
        <view class="u-flex u-row-between u-margin-top-12 u-margin-bottom-12 u-font-28">
          <view class="text-tips">费率</view>
          <view class="tip-text">0.6%(最低0.1)</view>
        </view>

        <view class="code-area">
          <view class="flex-box">
            <input
                :value="val"
                type="number"
                focus="true"
                maxlength="6"
                class="hide-input"
                @input="getVal"
            />
            <view :class="['item', { active: codeIndex == index }]" v-for="(data,index) in 6" :key="index">
              <view class="line"></view>
              <block ><text class="dot">{{ codeArr[index] ?'.' : ''}}</text></block>
            </view>
          </view>
          <view class="text-tips retrieve">忘记密码？<span @click="retrieve">立即找回</span></view>
        </view>
      </view>
</u-popup>
</template>

<script>
import { md5 } from 'md5js';
import {customRequest,add} from "@/api/crud";
export default {
  components: {},
  props:{
    showPwdModal:{
      type:Boolean,
      default:false
    },
    form:{
      type:Object,
      default:{}
    }
  },
  data() {
    return {
      codeIndex: 0, //下标
      codeArr: [],
      maxlength:6,
      val:'',//输入框的值
    };
  },
  computed:{

  },
  methods: {
    closeModal(){
      this.$emit('changeshowPwdModal', this.data)
    },
    //取值
    getVal(e) {
      let { value } = e.detail;
      this.val=value;
      // console.log('验证码:', value);
      let arr = value.split('');
      this.codeIndex = arr.length;
      this.codeArr = arr;
      // console.log(this.codeIndex, this.pwdArr);
      if (this.codeIndex < Number(this.maxlength)) return false;
		  this.submit();
    },
    //清除验证码或者密码
    clear(){
      this.codeIndex=0;
      this.codeArr=[];
      this.val="";
    },
    // 提交提现
    submit(){
			const password = md5(this.val);
			add({
				money:this.form.price,
				userAccountId:this.form.userAccountId,
				uid:this.loginForm.uid,
				password
			},'userCashOutRecord','shopApi').then(res=>{
				this.$u.route({
				  url:'/pagesA/success/success',
					type:'redirectTo',
				  params:{
				    title:'提交申请提交成功,等待审核',
				    flag:2,
				  },
				})
			}).catch(()=>{
				this.clear();
			})
    },
		//忘记密码
    retrieve(){
      this.$u.route({
        url:'/pagesB/wallet/payRetrieve',
				params:this.form
				
      })
    },
  }
};
</script>

<style lang="scss">
.cur-title{
  line-height: 90rpx;
  font-size: 30rpx;
  font-weight: bold;
  text-align: center;
}
.title{
  line-height: 80rpx;
}
.money{
  font-size: 72rpx;
  line-height: 100rpx;
  margin-bottom: 40rpx;
}
.cur-modal-content{
  margin-left: 32rpx;
  margin-right:32rpx;
  padding-bottom: 32rpx;
}
.code-area {
  text-align: center;
  .pas{
    padding-top: 200rpx;
    padding-bottom: 158rpx;
  }
  .retrieve{
    text-align: center;
    // margin-right: 71rpx;
    margin-top: 40rpx;
    font-size: 26rpx;
    span{
      color: var(--theme-color);
    }
  }
  .flex-box {
    display: flex;
    flex-wrap: wrap;
    position: relative;
    justify-content: center;
    margin-top: 20rpx;
  }
  .item {
    position: relative;
    width: 76rpx;
    height: 76rpx;
    margin-right: 16rpx;
    font-size: 30upx;
    font-weight: bold;
    background: #E6E6E6;
    // opacity: 0.92;
    border-radius: 10px;
    color: #323232;
    line-height: 88upx;
    box-sizing: border-box;
  }
  .item:last-child {
    margin-right: 0;
  }
  .active {
    border-color: $primary;
  }
  .active .line {
    display: block;
  }
  .line {
    display: none;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 2upx;
    height: 40upx;
    background: $primary;
    animation: twinkling 1s infinite ease;
  }
  .hide-input {
    position: absolute;
    top: 0;
    left: -100%;
    width: 200%;
    height: 100%;
    text-align: left;
    z-index: 9;
    opacity: 1;
  }
  @keyframes twinkling {
    0% {
      opacity: 0.2;
    }
    50% {
      opacity: 0.5;
    }
    100% {
      opacity: 0.2;
    }
  }

  .dot{
    font-size: 80upx;
    line-height: 40upx;
  }
}
</style>